<template>
<div class="home-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="menu-icon" @click="toggleSidebar">
            <van-icon name="bars" size="24" />
        </div>
        <div class="nav-tabs">
            <div class="nav-tab" :class="{ active: activeTab === 0 }" @click="switchTab(0)">关注</div>
            <div class="nav-tab" :class="{ active: activeTab === 1 }" @click="switchTab(1)">发现</div>
        </div>
        <div class="search-icon" @click="goToSearch">
            <van-icon name="search" size="24" />
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area" v-if="activeTab === 1">
        <!-- 左侧内容卡片 -->
        <div class="content-column">
            <!-- 宝藏APP卡片 -->
            <div class="content-card" @click="goToDetail('app1')">
                <div class="card-image">
                    <img src="https://picsum.photos/400/500?random=1" alt="宝藏APP" />
                </div>
                <div class="card-info">
                    <div class="card-tag">
                        <van-icon name="hot-o" />
                        <span>宝藏APP</span>
                    </div>
                    <div class="card-title">
                        "开发届"的卷王❓❓一键拥有40多个App✨
                    </div>
                    <div class="card-author">
                        <img src="https://i.pravatar.cc/100?img=1" alt="作者头像" class="author-avatar" />
                        <span class="author-name">起点集</span>
                        <div class="like-count" @click.stop="likePost('app1')">
                            <van-icon :name="isLiked('app1') ? 'like' : 'like-o'"
                                :color="isLiked('app1') ? '#ff2442' : ''" />
                            <span>{{ getLikeCount('app1') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 算了卡片 -->
            <div class="content-card" @click="goToDetail('post1')">
                <div class="card-image">
                    <img src="https://picsum.photos/400/600?random=3" alt="算了" />
                </div>
                <div class="card-info">
                    <div class="card-title">
                        算了！和你们外地人说不清楚。。。😂
                    </div>
                    <div class="card-author">
                        <img src="https://i.pravatar.cc/100?img=3" alt="作者头像" class="author-avatar" />
                        <span class="author-name">顺子</span>
                        <div class="like-count">
                            <van-icon name="like-o" />
                            <span>149</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧内容卡片 -->
        <div class="content-column">
            <!-- 天津泥人卡片 -->
            <div class="content-card">
                <div class="card-image">
                    <img src="https://picsum.photos/400/550?random=2" alt="天津泥人" />
                </div>
                <div class="card-info">
                    <div class="card-title">
                        天津泥人也太离谱了
                    </div>
                    <div class="card-author">
                        <img src="https://i.pravatar.cc/100?img=2" alt="作者头像" class="author-avatar" />
                        <span class="author-name">是个好地方</span>
                        <div class="like-count">
                            <van-icon name="like-o" />
                            <span>3433</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 四月买16pm卡片 -->
            <div class="content-card">
                <div class="card-image">
                    <img src="https://picsum.photos/400/400?random=4" alt="四月买16pm" />
                </div>
                <div class="card-info">
                    <div class="card-title">
                        四月买16pm大概什么价等不到618了🛒
                    </div>
                    <div class="card-author">
                        <img src="https://i.pravatar.cc/100?img=4" alt="作者头像" class="author-avatar" />
                        <span class="author-name">顺子</span>
                        <div class="like-count">
                            <van-icon name="like-o" />
                            <span>149</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'HomePage',
    data() {
        return {
            activeTab: 1
        }
    },
    created() {
        // 处理从404页面重定向过来的情况
        const sourceParam = this.$route.query.source;
        if (sourceParam === '404') {
            // 如果是从404页面重定向过来，可以在这里执行相关操作
            console.log('用户从404页面重定向而来');
            // 可以显示提示或执行其他操作
        }
    },
    methods: {
        toggleSidebar() {
            // 调用App.vue中的toggleSidebar方法
            this.$parent.toggleSidebar()
        },
        switchTab(index) {
            this.activeTab = index
            // 使用store的action来设置tabbar激活状态
            this.$store.dispatch('setTabbarActive', index)
        },
        goToSearch() {
            this.$router.push('/search')
        },
        goToDetail(id) {
            this.$router.push(`/detail/${id}`)
        },
        goToPublish() {
            this.$router.push('/publish')
        },
        goToMessage() {
            this.$router.push('/message')
        },
        goToProfile() {
            this.$router.push('/profile')
        },
        likePost(postId) {
            this.$store.dispatch('toggleLikePost', postId)
        },
        isLiked(postId) {
            return this.$store.getters.likedPosts.includes(postId)
        },
        getLikeCount(postId) {
            // 这里应该从API获取实际点赞数，这里只是模拟
            return this.isLiked(postId) ? '150' : '149'
        }
    }
}
</script>

<style scoped>
.home-container {
    min-height: 100vh;
    background-color: #f7f8fa;
    padding-bottom: 50px;
}

/* 顶部导航栏 */
.top-nav {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background-color: #fff;
    z-index: 100;
}

.menu-icon,
.search-icon {
    width: 40px;
    display: flex;
    align-items: center;
}

.nav-tabs {
    display: flex;
    align-items: center;
}

.nav-tab {
    padding: 0 16px;
    font-size: 16px;
    color: #999;
    position: relative;
}

.nav-tab.active {
    color: #333;
    font-weight: 500;
}

.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background-color: #ff2442;
    border-radius: 3px;
}

/* 内容区域 */
.content-area {
    display: flex;
    padding: 8px;
}

.content-column {
    flex: 1;
    padding: 0 4px;
}

.content-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-image {
    width: 100%;
    position: relative;
}

.card-image img {
    width: 100%;
    display: block;
}

.card-info {
    padding: 8px 10px 12px;
}

.card-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #ff2442;
    margin-bottom: 4px;
}

.card-tag .van-icon {
    margin-right: 4px;
    font-size: 12px;
}

.card-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.card-author {
    display: flex;
    align-items: center;
}

.author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
}

.author-name {
    font-size: 12px;
    color: #999;
    flex: 1;
}

.like-count {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
}

.like-count .van-icon {
    margin-right: 2px;
}

/* 底部导航栏 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
}

.nav-item.active {
    color: #ff2442;
}

.nav-item span {
    margin-top: 2px;
}

.nav-item.publish {
    position: relative;
}
</style>